<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
        <link href="css/zw.css" rel="stylesheet">
        <style type="text/css">
            body {margin: 0; padding: 0;}
        </style>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            
            var isShowImageBrowserBar = true;
            function showImageBrowserBar() {
                if(isShowImageBrowserBar){
                    $(".zw-image-browser-bar").hide();
                    isShowImageBrowserBar = false;
                } else {
                    $(".zw-image-browser-bar").show();
                    isShowImageBrowserBar = true;
                }
           };
           function addImageBrowserBarH(){
                $(".zw-image-browser-bar").css("height", ($(".zw-image-browser-bar").height()+10)+"px");
                var  imgMaxH = $(".zw-image-browser-bar").find(".zw-ib-bar-img-ul").find("img").css("max-height");
                $(".zw-image-browser-bar").find(".zw-ib-bar-img-ul").find("img").css("max-height", (parseInt(imgMaxH)+10)+"px");
           }
           function clkDate(e){
                console.log($(e).val()=="");
           }
        </script>
        <script type="text/javascript">
            function setMoveDiv(topbar){
                //var dv = document.getElementById(divId).children[0];
                var dv = topbar;
                var x = 0;
                var y = 0;
                var l = 0;
                var t = 0;
                var isDown = false;
                //鼠标按下事件
                dv.onmousedown = function(e) {
                    //获取x坐标和y坐标
                    x = e.clientX;
                    y = e.clientY;

                    //获取左部和顶部的偏移量
                    l = dv.parentNode.parentNode.offsetLeft;
                    t = dv.parentNode.parentNode.offsetTop;
                    
                    //开关打开
                    isDown = true;
                    //设置样式  
                    
                }
                //鼠标移动
                dv.onmousemove = function(e) {
                    dv.style.cursor = 'pointer';
                    if (isDown == false) {
                        return;
                    }
                    //获取x和y
                    var nx = e.clientX;
                    var ny = e.clientY;
                    //计算移动后的左偏移量和顶部的偏移量
                    var nl = nx - (x - l);
                    var nt = ny - (y - t);

                    dv.parentNode.parentNode.style.left = nl + 'px';
                    dv.parentNode.parentNode.style.top = nt + 'px';

                }
                //鼠标抬起事件
                dv.onmouseup = function() {
                    //开关关闭
                    isDown = false;
                    dv.style.cursor = 'pointer';
                }
                dv.onmouseout = function() {
                    //开关关闭
                    isDown = false;
                    dv.style.cursor = 'default';
                }
            }
        </script>
    </head>
    <body>
        <div class="zw-image-browser" style="display: none;">

            <div class="zw-close-box"><span>zw-tools本地文件管理</span><button type="button" id="zw-btn-close" class="zw-btn zw-btn-close" title="关闭">×</button></div>
            <div class="zw-conent">
                <div class="zw-ib-srch-box" >
                    <div class="zw-ib-srch-box-left">
                        <label><input type="checkbox" class="zw-chkbox zw-ib-chkbox-all" value="true"/>全选</label>
                        <button type="button" class="zw-btn zw-btn-ib-del-checked"> 删除选中</button>
                        <button type="button" class="zw-btn zw-btn-ib-del-checked" title="将预览时生成的图片转存至OUTPUT"> TMP转存</button>
                        <button type="button" class="zw-btn zw-btn-ib-del-checked"> 修改所属分类</button>
                        <div class="zw-edit-box" style="display: none; left: calc(50% - 270px);width: 540px;height: 280px;" >
                            <div class="zw-edit-title">编辑文件所属分类</div>
                            <ul class="zw-param-ul">
                                <li>
                                    <div class="zw-select-box">
                                        <a href="javascript:;" class="zw-a-cate zw-a-on"><span>女士</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>日本动画片</span></a>
                                        <a href="javascript:;" class="zw-a-cate zw-a-on"><span>户外</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>漫画</span></a>
        
                                        <a href="javascript:;" class="zw-a-cate"><span>摄影</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>戏服</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>男人</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>动画</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>盔甲</span></a>
                                                                     
                                        <a href="javascript:;" class="zw-a-cate"><span>运输</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>建筑学</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>城市</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>卡通</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>车</span></a>
                                                                    
                                        <a href="javascript:;" class="zw-a-cate"><span>食物</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>天文学</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>现代艺术</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>猫</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>机器人</span></a>
                                                                     
                                        <a href="javascript:;" class="zw-a-cate"><span>景观</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>狗</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>龙</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>幻想</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>跑车</span></a>
                                                                     
                                        <a href="javascript:;" class="zw-a-cate"><span>后世界末日</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>真实感</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>恐怖</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>名人</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>游戏角色</span></a>
                                                                     
                                        <a href="javascript:;" class="zw-a-cate"><span>科幻</span></a>
                                        <a href="javascript:;" class="zw-a-cate"><span>其他</span></a>
                                    </div> 
                                </li>
                            </ul>
                            <div class="zw-edit-bar">
                                <span>单个编辑时显示所属分类，多个编辑时一律不显示</span>
                                <button type="button" class="zw-btn">保存</button>
                                <button type="button" class="zw-btn">取消</button>
                            </div>
                        </div>     
                    </div>
                    <div class="zw-ib-srch-box-right">
                        
                        <select class="zw-select zw-select-ib-type">
                            <option value="">全部分类</option>
                            <option value='女士'>女士</option>
                            <option value='日本动画片'>日本动画片</option>
                            <option value='户外'>户外</option>
                            <option value='漫画'>漫画</option>
                            <option value='摄影'>摄影</option>
                            <option value='戏服'>戏服</option>
                            <option value='男人'>男人</option>
                            <option value='动画'>动画</option>
                            <option value='盔甲'>盔甲</option>
                            <option value='运输'>运输</option>
                            <option value='建筑学'>建筑学</option>
                            <option value='城市'>城市</option>
                            <option value='卡通'>卡通</option>
                            <option value='车'>车</option>
                            <option value='食物'>食物</option>
                            <option value='天文学'>天文学</option>
                            <option value='现代艺术'>现代艺术</option>
                            <option value='猫'>猫</option>
                            <option value='机器人'>机器人</option>
                            <option value='景观'>景观</option>
                            <option value='狗'>狗</option>
                            <option value='龙'>龙</option>
                            <option value='幻想'>幻想</option>
                            <option value='跑车'>跑车</option>
                            <option value='后世界末日'>后世界末日</option>
                            <option value='真实感'>真实感</option>
                            <option value='恐怖'>恐怖</option>
                            <option value='名人'>名人</option>
                            <option value='游戏角色'>游戏角色</option>
                            <option value='科幻'>科幻</option>
                            <option value='其他'>其他</option>
                        </select>
                        <input type="date" class="zw-date" placeholder="请选择日期" onchange="clkDate(this)"  />
                        <label><input type="checkbox" class="zw-chkbox zw-chkbox-ib-fav" value="true"/>已收藏</label>
                        <input type="text" class="zw-text" placeholder="请输入关键字" style="width: 112px;"/><button type="button" class="zw-btn zw-btn-ib-search">搜索</button>
                        <button type="button" class="zw-btn zw-btn-ib-page-bar-pic-t">大图</button>  
                    </div>
                </div>
                <div class="zw-ib-image-box" id="zw-ib-image-box" >
                    <ul class="zw-image-ul-ib zw-image-ul-ib-half">
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-true">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-true">❤</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-state"><i class="zw-upload-state-0">未上传</i></a>
                            <span class="zw-is-temp">TEMP</span>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                            <span class="zw-is-temp">TEMP</span>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-true">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-true">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-true">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-true">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-true">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-true">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-true">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-true">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-true">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-true">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="zw-a-imb-ib"><img class="" src="css/109-200x300.jpg"></a>
                            <a href="javascript:;" class="zw-a-imb-ib-checkbox"><i class="zw-a-imb-false">✔</i></a>
                            <a href="javascript:;" class="zw-a-imb-ib-fav"><i class="zw-red-false">❤</i></a>
                        </li>
                    </ul>
                </div>
                <div class="zw-param-box"  id="zw-param-box" style="display: none;">
                    <ul class="zw-param-ul">
                        <li>
                            <b>翻译使用类型：</b>
                            <label><input type="radio" name="used_trans_type" class="zw-rdo" value="0" checked />禁用</label>
                            <label><input type="radio" name="used_trans_type" class="zw-rdo" value="1"/>百度翻译</label>
                            <label><input type="radio" name="used_trans_type" class="zw-rdo" value="2"/>AI8808 API_KEY翻译</label>
                            <button type="button" class="zw-btn zw-btn-ib-page-bar-param-save" style="margin-left: 23px;">保存参数</button>
                        </li>
                        <li>
                            <b>百度翻译KEY：</b>
                            <input type="text" name="baidu_key" class="zw-text" placeholder="用于翻译提示词,请先保存参数再测试"> 
                            <button type="button" id="zw-baidu-key" class="zw-btn">测试</button>
                            <button type="button" class="zw-btn zw-btn-ib-page-bar-param-save">保存参数</button>
                            <a href="https://www.ai8808.com/doc" target="_blank">申请教程</a>
                        </li>
                        <li>
                            <b>AI8808 API_KEY：</b>
                            <input type="text" name="tuqu_key" class="zw-text" placeholder="用于云端保存或翻译或AI提示词细化"> 
                            <button type="button" id="zw-tuqu-key" class="zw-btn">测试</button>
                            <button type="button" class="zw-btn zw-btn-ib-page-bar-param-save">保存参数</button>
                            <a href="https://www.ai8808.com" target="_blank">访问AI8808.com</a>
                        </li>
                        
                        <li>
                            <b>AI生成文件时<br>默认所属分类：</b>
                            <div class="zw-select-box">
                                <a href="javascript:;" class="zw-a-cate zw-a-on"><span>女士</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>日本动画片</span></a>
                                <a href="javascript:;" class="zw-a-cate zw-a-on"><span>户外</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>漫画</span></a>

                                <a href="javascript:;" class="zw-a-cate"><span>摄影</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>戏服</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>男人</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>动画</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>盔甲</span></a>
															 
                                <a href="javascript:;" class="zw-a-cate"><span>运输</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>建筑学</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>城市</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>卡通</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>车</span></a>
															
                                <a href="javascript:;" class="zw-a-cate"><span>食物</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>天文学</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>现代艺术</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>猫</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>机器人</span></a>
															 
                                <a href="javascript:;" class="zw-a-cate"><span>景观</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>狗</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>龙</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>幻想</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>跑车</span></a>
															 
                                <a href="javascript:;" class="zw-a-cate"><span>后世界末日</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>真实感</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>恐怖</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>名人</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>游戏角色</span></a>
															 
                                <a href="javascript:;" class="zw-a-cate"><span>科幻</span></a>
                                <a href="javascript:;" class="zw-a-cate"><span>其他</span></a>
                            </div>
                            <div class="zw-btn-cate-keys-save-box">
                                <button type="button" class="zw-btn zw-btn-cate-keys-save">保存默认分类</button>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="zw-ib-page-bar">
                    <div class="zw-ib-page-bar-info">
                        <span class="zw-ib-page-bar-total-count">1</span>
                        <span class="zw-ib-page-bar-page-size">
                            <select class="zw-select zw-select-page-size" name="zw-select-page-size">
                                <option value="20">20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="500">500</option>
                                <option value="1000">1000</option>
                            </select>
                        </span>
                        <span class="zw-ib-page-bar-page-index">3</span>
                    </div>
                    <button type="button" class="zw-btn zw-btn-ib-page-bar-prev">上一页</button>
                    <button type="button" class="zw-btn zw-btn-ib-page-bar-next">下一页</button>
                </div>
                <div class="zw-ib-bottom-btn-bar">
                    <span class="zw-bars-msg"></span>
                    <span class="zw-bars-msg2"></span>
                    <button type="button" class="zw-btn zw-btn-ib-page-bar-param-guidang" title="归档操作：只是让output文件夹内看起来更简洁，文件依旧存在，依旧可以使用此文件管理器查看管理">文件归档</button>
                    <button type="button" class="zw-btn zw-btn-ib-page-bar-param-show">参数设置</button>
                    <button type="button" class="zw-btn zw-btn-ib-page-bar-param-cancel">取消/返回</button>
                </div>
            </div>
        </div>
        <div class="zw-image-browser-bar">
            <div class="zw-image-browser-bar-left">
                <ul class="zw-ib-bar-img-ul">
                    <li><a href="javascript:;" onclick="" class="zw-ib-bar-a"><img class="zw-on" src="css/109-200x300.jpg"></a><a href="javascript:;" class="zw-ib-bar-a-del">×</a></li>
                    <li><a href="javascript:;" onclick="" class="zw-ib-bar-a"><img class="zw-on" src="css/109-200x300.jpg"></a><a href="javascript:;" class="zw-ib-bar-a-del">×</a></li>
                    <li><a href="javascript:;" onclick="" class="zw-ib-bar-a"><img class="zw-on" src="css/109-200x300.jpg"></a><a href="javascript:;" class="zw-ib-bar-a-del">×</a></li>
                    <li><a href="javascript:;" onclick="" class="zw-ib-bar-a"><img class="zw-on" src="css/109-200x300.jpg"></a><a href="javascript:;" class="zw-ib-bar-a-del">×</a></li>
                    <li><a href="javascript:;" onclick="" class="zw-ib-bar-a"><img class="zw-on" src="css/109-200x300.jpg"></a><a href="javascript:;" class="zw-ib-bar-a-del">×</a></li>
                    <li><a href="javascript:;" onclick="" class="zw-ib-bar-a"><img class="zw-on" src="css/109-200x300.jpg"></a><a href="javascript:;" class="zw-ib-bar-a-del">×</a></li>
                    <li><a href="javascript:;" onclick="" class="zw-ib-bar-a"><img class="zw-on" src="css/109-200x300.jpg"></a><a href="javascript:;" class="zw-ib-bar-a-del">×</a></li>

                </ul>
                
            </div>
            <div class="zw-image-browser-bar-left-btn">
                <button type="button" class="zw-btn zw-btn-ib-bar-clear">清空</button>
            </div>
        </div>
        <div class="zw-mask-layer">
            <div class="zw-image-zoom-box">
                <div class="zw-image-zoom-l">
                    <a href="" class="zw-zoom-a-prev"></a>
                </div>
                <div class="zw-image-zoom-c">
                    <a href="javascript:;" class="zw-image-zoom-box-img"><img class="zw-on" src="css/ComfyUI_temp_fnpfy_00016_.png"></a>
                    <a href="javascript:;" class="zw-image-zoom-box-close">×</a>
                </div>
                <div class="zw-image-zoom-r">
                    <a href="" class="zw-zoom-a-next"></a>
                </div>
            </div>
        </div>

        <div class="zw-image-browser-bar-right">
            <div class="zw-qark-btn-box">
                <button type="button" class="zw-btn zw-btn-ib-bar-0" onclick="addImageBrowserBarH()">+ 放大</button>
                <button type="button" class="zw-btn zw-btn-ib-bar-1">- 缩小</button>
                <button type="button" class="zw-btn zw-btn-ib-bar-close" onclick="showImageBrowserBar()">收缩</button>
            </div>
            <div class="zw-circle-btn-box">
                <button type="button" class="zw-btn zw-btn-ib-bar-m" title="ZW文件管理">
                    <span class="zw-fg-min">ZW</span>
                </button>
                
            </div>
        </div>
        <script type="text/javascript">
            //setMoveDiv($(".zw-image-browser-bar-right").find(".zw-btn-ib-bar-m")[0])
        </script>

<div id="draggable"></div>
<style>
    #draggable {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        position: absolute;
        cursor: move;
    }
</style>
<script>
        $(document).ready(function () {
            //var $draggable = $('#draggable');
            var $draggable = $(".zw-image-browser-bar-right");
            var offsetX, offsetY, initialX, initialY;
            

            $draggable.on('mousedown', function (e) {
                // 获取当前窗口的宽度和高度
                var width = $(window).width();
                var height = $(window).height();
                
                // 获取鼠标按下时的坐标
                offsetX = e.pageX - $draggable.offset().left;
                offsetY = e.pageY - $draggable.offset().top;
 
                // 获取 DIV 初始位置
                initialX = $draggable.offset().left;
                initialY = $draggable.offset().top;
 
                // 绑定鼠标移动事件
                $(document).on('mousemove.draggable', function (moveEvent) {
                    $(document).css("cursor",'move');
                    // 计算新的位置
                    var newX = moveEvent.pageX - offsetX;
                    var newY = moveEvent.pageY - offsetY;
 
                    // 更新 DIV 位置
                    // $draggable.css({
                    //     left: newX,
                    //     top: newY
                    // });
                    // 已知left 和top值 和 对象高宽 计算出 right 和 buttom值
                    var rightX = width - newX - $draggable.width();
                    var bottomY = height - newY - $draggable.height(); 
                    console.log('$draggable.width(): ' + $draggable.width() + ', $draggable.height(): ' + $draggable.height());
                    console.log('rightX: ' + rightX + ', bottomY: ' + bottomY);
                    $draggable.css({
                        right: rightX,
                        bottom: bottomY
                    });

                });
 
                // 绑定鼠标松开事件
                $(document).on('mouseup.draggable', function () {
                    // 解绑鼠标移动事件
                    $(document).off('mousemove.draggable mouseup.draggable');
                    $draggable.css({cursor : 'default'});
                });
 
                // 阻止默认事件和冒泡
                e.preventDefault();
                return false;
            });
        });
        /**
        $(document).ready(function() {
            $(window).resize(function() {
                // 获取当前窗口的宽度和高度
                var width = $(window).width();
                var height = $(window).height();
                
                // 输出宽度和高度到控制台
                console.log('Window width: ' + width + ', height: ' + height);
                
                // 你可以在这里添加其他你想要在窗口大小改变时执行的代码
                // 例如，调整某些元素的尺寸或位置
                var $draggable = $(".zw-image-browser-bar-right");
                // 获取 DIV 初始位置
                var initialX = $draggable.offset().left;
                var initialY = $draggable.offset().top;
                console.log(initialX,initialY);

                if(initialX+50 > width){
                    initialX = width - 101;
                }
                if(initialY+50 > height){
                    initialY = height - 110;
                }
                
                // 更新 DIV 位置
                $draggable.css({
                    left: initialX,
                    top: initialY
                });

                // 已知left 和top值 和 对象高宽 计算出 right 和 buttom值
                // 获取当前窗口的宽度和高度
                var width = $(window).width();
                var height = $(window).height();
                var rightX = width - initialX - $draggable.width();
                var bottomY = height - initialY - $draggable.height(); 

                $draggable.css({
                    right: rightX,
                    bottom: bottomY
                });

            });
        });
        */
</script>
    </body>
</html>